<!--
@Description:属性值维护
@Author:zqy
@Date:2024-05-07 11:26:50
@Last Modified by:zqy
@Last Modified time:2024-05-07 11:26:50
-->
<template>
  <el-dialog
    ref="refDlg"
    :title="'属性值维护'"
    :visible.sync="dialogShow"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="800px"
    @close="closeDialog"
  >
    <div>
      <div class="Attr-head">
        <el-row type="flex" class="row-bg" flex-direction="row-reverse">
          <el-button type="primary" size="mini" @click="handleAdd">新增</el-button>
        </el-row>
      </div>
      <!-- 列表 -->
      <table-box
        :data="formData"
        :table-config="tableConfig"
        :table-height="400"
        table-row-key="id"
      >
        <el-table-column label="属性值编码">
          <template v-slot="{row,$index}">
            <el-input v-if="addRow && editIndex ===$index" v-model="row.fixedCode" size="mini" width="80" placeholder="请输入属性值编码" />
            <span v-else>{{ row.fixedCode }}</span>
          </template>
        </el-table-column>
        <el-table-column label="属性值名称">
          <template v-slot="{row,$index}">
            <el-input v-if="editIndex ===$index" v-model="row.fixedName" size="mini" width="80" placeholder="请输入属性值名称" />
            <span v-else>{{ row.fixedName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="排序" width="230px">
          <template v-slot="{row,$index}">
            <el-button class="min-txt-btn" type="text" size="mini" @click="handleSort(row,'top')">置顶</el-button>
            <el-button class="min-txt-btn" type="text" size="mini" @click="handleSort(row,'moveUp')">上移</el-button>
            <el-button class="min-txt-btn" type="text" size="mini" @click="handleSort(row,'moveDown')">下移</el-button>
            <el-button class="min-txt-btn" type="text" size="mini" @click="handleSort(row,'bottom')">置底</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="110px">
          <template v-slot="{row,$index}">
            <template v-if="editIndex ===$index">
              <el-button class="min-txt-btn" type="text" size="mini" @click="handleCancel(row,$index)">取消</el-button>
              <el-button class="min-txt-btn" type="text" size="mini" @click="handleSave(row,$index)">保存</el-button>
            </template>
            <template v-else>
              <el-button class="min-txt-btn" type="text" size="mini" @click="handleEdit(row,$index)">编辑</el-button>
              <el-button class="min-txt-btn" type="text" size="mini" @click="handleDelete(row,$index)">删除</el-button>
            </template>
          </template>
        </el-table-column>
      </table-box>
    </div>
    <!-- <div slot="footer">
      <el-button size="mini" @click="closeDialog">取消</el-button>
      <el-button size="mini" type="primary" @click="submitForm">保存</el-button>
    </div> -->
  </el-dialog>
</template>
<script>
import { getByAtlasAttributeId, delAttributeValue, saveAttributeValue, updateAtlasAttrValueSort } from '@/api/shopauxPlat/attrConfig' // 新增/编辑
export default {
  name: 'PageMainForm',
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    mainData: {
      type: [String, Object],
      default: ''
    }
  },
  data() {
    return {
      tableConfig: {
        interfacePath: null,
        hideFuncBar: true
      },
      addRow: false, // 是否新增操作
      editRowId: '', // 编辑行Id
      editIndex: -1, // 编辑行索引
      formData: [
        { fixedCode: '', fixedName: '' }
      ],
      formRules: {
        fixedCode: [{
          required: true,
          message: '请输入属性编码',
          trigger: 'blur'
        }],
        fixedName: [{
          required: true,
          message: '请输入属性名称',
          trigger: 'blur'
        }]
      },
      sorting: false,
      sortTime: ''
    }
  },
  computed: {
    dialogShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  created() {
    this.getDetailData()
  },
  methods: {
    closeDialog() {
      this.dialogShow = false
    },
    getDetailData() {
      const { id } = this.mainData
      getByAtlasAttributeId(id).then(res => {
        if (res.success === 1) {
          this.formData = res.data || []
        }
      })
    },
    handleEdit(row, index) {
      if (this.editRowId || this.addRow) {
        this.$message.warning('存在待保存的数据行，请先保存')
        return
      }
      if (!row.id) {
        this.$message.warning('属性值数据异常')
        return
      }
      this.$set(row, 'oldName', row.fixedName)
      this.editRowId = row.id
      this.editIndex = index
      this.addRow = false
    },
    handleAdd() {
      if (this.editRowId || this.addRow) {
        this.$message.warning('存在待保存的数据行，请先保存')
        return
      }
      this.formData.push({ fixedCode: '', fixedName: '' })
      this.editRowId = ''
      this.editIndex = this.formData.length - 1
      this.addRow = true
    },
    handleRefreshData() {
      this.$emit('refreshTable')
      this.getDetailData()
    },
    // 保存新增或编辑行
    handleSave(row, index) {
      const { fixedCode, fixedName } = row
      if (!fixedCode) {
        this.$message.warning('请填写属性值编码')
        return
      }
      if (!fixedName) {
        this.$message.warning('请填写属性值名称')
        return
      }
      if (!row.id) {
        const isRepeat = this.formData.some(v => !!v.id && v.fixedCode === fixedCode)
        if (isRepeat) {
          this.$message.warning('属性值编码重复')
          return
        }
      }

      const params = {
        fixedCode,
        fixedName,
        attributeId: this.mainData.id
      }
      if (row.id) {
        params.id = row.id
      }
      saveAttributeValue(params).then(res => {
        this.$message.success('保存成功')
        this.handleRefreshData()
        this.editIndex = -1
        this.editRowId = ''
        this.addRow = false
      })
    },
    // 取消编辑
    handleCancel(row, index) {
      if (!row.id) {
        this.formData.splice(index, 1)
      } else {
        const { fixedName, oldName } = row
        this.$set(row, 'fixedName', oldName)
        this.$set(row, 'oldName', oldName)
      }
      this.addRow = false
      this.editRowId = ''
      this.editIndex = -1
    },
    // 删除行
    handleDelete(row, index) {
      if (this.editRowId || this.addRow) {
        this.$message.warning('存在待保存的数据行，请先保存')
        return
      }
      if (!row.id) {
        this.formData.splice(index, 1)
        return
      }
      const { id, fixedName } = row
      this.$confirm(`确认删除属性值名称【${fixedName}】吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delAttributeValue(id).then(res => {
          if (res.success === 1) {
            this.$message.success('删除成功')
            this.handleRefreshData()
          }
        })
      })
    },
    /**
   * 排序
   * @param {Object} row 排序行
   * @param {string} type 移动类型(bottom 置底 ，top 置顶 ， moveDown 下移 ，  moveUp 上移)
  */
    handleSort(row, type) {
      if (this.sorting) return
      if (this.editRowId || this.addRow) {
        this.$message.warning('存在待保存的数据行，请先保存')
        return
      }
      const now = Date.now()
      if (this.sortTime) {
        const diffTime = Math.floor((now - this.sortTime) / 1000)
        // 对比排序操作时间差，大于2s的可操作
        if (diffTime < 2) return
      }
      this.sortTime = now
      const params = {
        id: row.id,
        type
      }
      this.sorting = true
      updateAtlasAttrValueSort(params).then(res => {
        this.sorting = false
        if (res.success === 1) {
          this.handleRefreshData()
        }
      }).catch(() => {
        this.sorting = false
      })
    }
  }
}
</script>
<style lang='scss' scoped>
.el-col el-col-11{margin-bottom: 20px;}
 .avatar-uploader .el-upload {
    border: 1px dashed #181717;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
  .avatar {
    width: 120px;
    height: 120px;
    display: block;
  }
  .min-txt-btn{
    padding:  0 5px !important;
  }
</style>
